<script setup lang="ts">
defineOptions({
  name: "WithdrawalRecords"
});

import { ref, h } from "vue";
import {getWithdrawalOrderAgentlist,getWithdrawalOrderState,getWithdrawalOrderAgentInfo} from "@/api/commission";
import { downloadFile } from "@/utils";
import { formatDateTime } from '@/utils';
import { ElTooltip } from "element-plus";



const currentPage = ref(1)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const pageTotal = ref(0)

const dialogTableVisible = ref(false)
const gridData = ref([])

let tableData = ref([])
const withdrawalOrderStateList= ref([]) //提现单状态
const withdrawalOrderStateValue = ref("")

const withdrawalNumber = ref("");//提现单号
const createTime = ref("")//发起时间
const withdrawalTime = ref("")//提现成功时间

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getListTableData(val)
}

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getListTableData(val)
}

getWithdrawalOrderState().then((res:any) =>{
  withdrawalOrderStateList.value = res.data;
})

getListTableData()
function getListTableData(params?) {
        const [start, end] = getPickerTime(createTime)
        const [withdrawalTimeStart, withdrawalTimeEnd] = getPickerTime(withdrawalTime)
        const _params = {
            pageNum: 1,
            pageSize: 10,
            createTimeStart: start,
            createTimeEnd: end,
            state: withdrawalOrderStateValue.value,
            withdrawalTimeStart: withdrawalTimeStart,
            withdrawalTimeEnd: withdrawalTimeEnd,
            total: 0,
            ...params
        };
  getWithdrawalOrderAgentlist({ ..._params }).then((res: any) => {
    const totalData =  res.data
    tableData.value = totalData.rows
    pageTotal.value = res.total
    console.log(tableData.value,'tableData')
  })
}
function getPickerTime(selectTime) {
    const [startTime, endTime] = selectTime.value
    const start = new Date(startTime)
    const end = new Date(endTime)
    return startTime ? [formatDateTime(start), formatDateTime(end)] : ''
}
// getPickerTime()
// 重置页面
const onReset = () => {
    withdrawalNumber.value = "" //提现单号   
    withdrawalOrderStateValue.value = ''//输入提现单状态
    createTime.value = '' //发起时间
    withdrawalTime.value = ''//提现成功  
    pageTotal.value = 0
    currentPage.value = 1
    getListTableData();
}
let getInfoID: string | number = ''
const getInfo = (id: string | number, pageNum: number = 1, pageSize: number = 10) => {
  getInfoID = id
  getListDtl({ id, pageNum, pageSize, total: 0 }).then((res: any) => {
    const { data, rows } = res;
    if (rows.length) {
      const one = rows[0]
      dialogTitle.value = `${one.startDate}~${one.endDate}对账单`
    }
    gridData.value = rows
    dialogTotal.value = data.total
    console.log(res)
  })
}
const dialogTitle = ref("")
const dialogTotal = ref(0)
const dialogCurrent = ref(1)
const showOneTable = ref(true)
const dialogHandleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getInfo(val)
}

const dialogHandleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getInfo(val)
}

const closeDialog = () =>{
  showOneTable.value = true
}
const drawer = ref(false);
const drawerInfo = ref({})
const detailDtlList = ref({});//详情数据
  const handleDialogDetails = (data) =>{
      getWithdrawalOrderAgentInfo(data.id).then((res: any) => {      
        drawerInfo.value = res.data
        drawer.value = true
        console.log( drawerInfo.value,'详情')
});
  
  console.log(data)
}
const renderstate = ({ column }) =>{
  // return h(ElTooltip, {content: 'dfddfdfd',placement: 'top-start', effect: 'light'}, [column.label])
  return h('span', column.label)
}
</script>
<template>
  <div class="c-page">
    <div class="search">      
        <div class="c-input">
        <el-input
            clearable
            placeholder="请输入提现单号"
            v-model="withdrawalNumber"
          ></el-input>
      </div>
      <div class="c-input">
        <el-select size="large" v-model="withdrawalOrderStateValue" placeholder="请选择提现单状态">
          <el-option v-for="item in withdrawalOrderStateList" :key="item.code" :label="item.desc" :value="item.code">
          </el-option>
        </el-select>
      </div>
      <div class="c-input-time">
        <el-date-picker v-model="createTime" size="large" type="daterange" range-separator="-" start-placeholder="发起开始日期"
          end-placeholder="发起结束日期">
        </el-date-picker>
      </div>
      <div class="c-input-time">
        <el-date-picker v-model="withdrawalTime" size="large" type="daterange" range-separator="-" start-placeholder="提现成功开始"
          end-placeholder="提现成功结束">
        </el-date-picker>
      </div>
      <div class="search-btn">
        <el-button type="primary"  size="large"  class="c-btn"  @click="getListTableData">查询</el-button>
        <el-button size="large" class="c-btn" @click="onReset">重置</el-button>
      </div>
    </div>
    <div class="c-page__bg">
      <el-table :data="tableData">        
        <el-table-column prop="withdrawalTypeDisplay" label="交易类型" :render-header="renderstate"></el-table-column>
        <el-table-column prop="settlementTypeDisplay" label="提现方式"> </el-table-column>
        <el-table-column width="180" prop="withdrawalAmount" label="提现金额（元）"> </el-table-column>
        <el-table-column prop="bankRemark" label="提现说明"> </el-table-column>
        <el-table-column width="220"  prop="withdrawalTime" label="成功时间">
          <!-- <template #default="{ row }">
            {{ row.startDate }} ~ {{ row.endDate }}
          </template> -->
        </el-table-column>
        <el-table-column prop="stateDisplay" label="状态">
          <template #default="{ row }">
            <!-- {{ row.stateDisplay }} -->
            <div class="c-flex-row" style="align-items: center;">
              <span v-if="row.stateDisplay === '提现成功'" class="c-dot-success"></span>
              <span v-else class="c-dot-success"></span>
              {{ row.stateDisplay }}
            </div>
          </template>
        </el-table-column>
        <el-table-column #default="{ row }" label="操作">          
          <span class="c-text-primary" @click="handleDialogDetails(row)">详情</span>
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination v-model:current-page="currentPage" :page-size="10" :size="size" :disabled="disabled"
          :background="background" layout="total, prev, pager, next" :total="pageTotal" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
      <el-drawer v-model="drawer" title="详情" size="40%">
                <el-form class="c-drawer-form">
                  <div class="c-info__title">基本信息</div>
                    <el-form-item label="提现单号">{{ drawerInfo.amountOfApply }}</el-form-item>
                    <el-form-item label="提现方式">{{ drawerInfo.amountOfPre }}</el-form-item>
                    <el-form-item label="提现金额">{{ drawerInfo.invoiceBatchTotalDisplay }}</el-form-item>
                    <el-form-item label="提现时间">{{ drawerInfo.invoiceBatchTotalDisplay }}</el-form-item>
                    <el-form-item label="提现状态">{{ drawerInfo.invoiceBatchTotalDisplay }}</el-form-item>
                    <el-form-item label="提现说明">{{ drawerInfo.invoiceBatchTotalDisplay }}</el-form-item>
                    <el-form-item label="打款凭证">{{ drawerInfo.invoiceBatchTotalDisplay }}</el-form-item>

                    <div class="c-info__title">提现账户信息</div>
                    <el-form-item label="姓名">{{ drawerInfo.merchantsName }}</el-form-item>
                    <el-form-item label="银行账户">{{ drawerInfo.enterpriseIdNumber }}</el-form-item>
                    <el-form-item label="身份证号">{{ drawerInfo.enterpriseRegistrationAddress }}</el-form-item>
                    <el-form-item label="手机号">{{ drawerInfo.contactNumber }}</el-form-item>                   
                </el-form>
            </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.c-page {
  width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-right:40px;
}

.search {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  .c-input{
    width: 240px !important;
    margin-bottom: 16px;
    margin-right: 16px;
    --el-border-radius-base: 8px;
    --el-input-focus-border-color: var(--main-color) !important;
    --el-component-size: 40px;
    }
    .c-input-time{
      margin-bottom: 16px;
      margin-right: 16px;
    --el-border-radius-base: 8px;
    --el-input-focus-border-color: var(--main-color) !important;
    --el-component-size: 40px;
    }

  .block {
    width: 30%;
    padding-left: 30px;
    padding-right: 30px;
  }

  .search-btn {
    padding-left: 15px;
  }

  .search-btn{
    padding-left: 15px;
  }
  .c-btn{
      height:38px;
      border-radius: 8px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
    }
}

.c-page__bg {
  width: 100%;
  height: 100%;
  margin-top: 25px;
  padding-bottom: 24px;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.c-text-primary {
  font-size: 14px;
  color: #1C9FFF;
  white-space: nowrap;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.pagination-block {
  padding-top: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
}

.c-dot-success,
.c-dot-info {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #43bf0a;
}

.c-dot-info {
  background-color: #bfbfbf;
}

.system-icon-content {
  min-height: 500px;
}

.flex-row {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #262626;
}

.back {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #1c9fff;

  .back-text {
    display: flex;
    align-items: center;
    padding-right: 5px;
    font-size: 16px;
    cursor: pointer;
  }

  .title {
    color: #8c8c8c;
    font-size: 16px;
  }
}
</style>
